<template>
  <div>
      <el-form :model="queryParams" inline style="text-align: left;">
        <el-form-item label="填报日期">
          <el-date-picker
            v-model="queryParams.date"
            type="date"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" v-if="$route.query.listForm === 'check'">
          <el-input v-model="queryParams.ename" placeholder="请输入姓名" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="432px"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="empno" label="员工号" width="80" align="center"></el-table-column>
        <el-table-column prop="ename" label="姓名" width="150" align="center"></el-table-column>
        <el-table-column prop="reportDate" label="漏报日期" min-width="150" align="center"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="200" align="center" fixed="right" v-if="$route.query.listForm === 'personal'">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleCheckDetail(scope.row)"
            >
              补报
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px; text-align: right;"
        :current-page="queryParams.page"
        :page-size="queryParams.limit"
        :page-sizes="[8,10,15,20]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>

    <report-form
      :visible.sync="detailVisible"
      dialog-title="补报"
      form-type='supplement'
      :report-data="currentDetail"
      :lost-date="lostDate"
      @close="handleDetailClose"
    />
  </div>
</template>

<script>
import ReportForm from '@/components/ReportForm.vue'

export default {
name: 'lostReportList',
  components: {
    ReportForm
  },
  data(){
    return {
        queryParams: {
            page: 1,
            limit: 8,
            date: null,
            deptno: 1,
            empno: 0,
            ename: ''
        },
        tableData: [],
        lostDate: [],
        total: 0,
        multipleSelection: [],
        detailVisible: false,
        currentDetail: {}
    }
  },
  methods: {
    getTableData() {
        this.tableData = []
        const query = {
          ...this.queryParams
        }
        //let url = '/getLostDate'
        if (this.$route.query.listForm === 'check') {
            //url = '/getLostDateByDept'
            const query = {
              ...this.queryParams,
              empno: null
            }
            this.$http.post('/getLostDateByDept', query).then(res => {
                this.tableData = res.data.data
                this.total = res.data.count
            }).catch(() => {
                this.$message.warning('获取数据失败')
                this.tableData = []
                this.total = 0
            })
        } else {
            this.$http.post('/getLostDateByDept', this.queryParams).then(res => {
              this.tableData = res.data.data
                // this.lostDate = res.data.data
                // this.total = res.data.count
                // this.tableData = this.lostDate.map(item => ({
                //   reportDate: item,
                //   empno: this.queryParams.empno,
                //   ename: localStorage.getItem('ename')
                // }))
            }).catch(() => {
                this.$message.warning('获取数据失败')
                this.tableData = []
                this.total = 0
            })
        }
    },

    handleSearch() {
      this.queryParams.page = 1
      this.getTableData()
    },

    handleReset() {
      this.queryParams = {
        page: 1,
        limit: 8,
        date: null,
        deptno: 1,
        empno: 0,
        ename: ''
      }
      this.getTableData()
    },

    handleSizeChange(val) {
      this.queryParams.limit = val
      this.getTableData()
    },

    handleCurrentChange(val) {
      this.queryParams.page = val
      this.getTableData()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleCheckDetail(row) {
      this.currentDetail = {}
      this.lostDate = row.reportDate
      this.detailVisible = true
    },

    handleDetailClose() {
      this.detailVisible = false
      this.currentDetail = {}
      this.getTableData()
    }
  },
  created() {
    this.queryParams.empno = localStorage.getItem('empno')
    this.queryParams.deptno = localStorage.getItem('deptno')
    this.queryParams.ename = localStorage.getItem('ename')
    this.getTableData()
  }
}
</script>

<style>

</style>